<template>
  <div v-if="inon" class="login">
    <!-- <vue-xlsx-table @on-select-file="handExcelJSOn">转化JSON数据</vue-xlsx-table> -->
    <!-- <a-row :span="24">
      <a-col class="title">
        <span class="logo"></span>
        {{ defaultSettings.title }}
      </a-col>
    </a-row>
    <div class="login-content">
      <a-form-model ref="form" :rules="rules" :model="form">
        <a-form-model-item prop="account">
          <a-input v-model="form.account" size="large" type="text" placeholder="用户名" :maxLength="30">
            <a-icon slot="prefix" type="user" style="color: #fff" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="userPwd">
          <a-input-password v-model="form.userPwd" size="large" placeholder="密码" :maxLength="30">
            <a-icon slot="prefix" type="lock" style="color: #fff" />
          </a-input-password>
        </a-form-model-item>
        <a-row type="flex">
          <a-col :span="16">
            <a-form-model-item prop="code">
              <a-input v-model="form.code" size="large" type="text" placeholder="验证码" :maxLength="6">
                <a-icon slot="prefix" type="safety-certificate" style="color: #fff" />
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8"
            ><img
              style="width: 100%; height: 40px; padding-left: 10px"
              :src="codeImg"
              alt=""
              @click="allEvents('code')"
            />
          </a-col>
        </a-row>
        <a-form-model-item>
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button"
            :loading="state.loginBtn"
            :disabled="state.loginBtn"
            @click="allEvents('login')"
            >登录</a-button
          >
        </a-form-model-item>
      </a-form-model>
    </div> -->
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
import { verificationCode } from '@/api/login'

import defaultSettings from '@/config/defaultSettings'

export default {
  name:"login",
  data() {
    return {
      defaultSettings,
      form: {
        account: '',
        userPwd: '',
        code: '',
      },
      rules: {},
      codeImg: '',
      inon: false,
      state: {
        loginBtn: false,
      },
    }
  },
  created() {
    // this.getCode()
  },
  mounted() {
    this.inon = false
    if (process.env.NODE_ENV == 'development') {

      setTimeout(() => {
        this.$router.push({
          path: '/user/loginAdmin',
        })
      }, 100);
    } else {
      if (this.GetQueryString('code')) {
        if (this.GetQueryString('state') == 'caiyou') {
          this.logintow({
            code: this.GetQueryString('code'),
          })
            .then(() => {
              this.$router.push({
                // path: this.redirect || '/'
                path: '/',
              })
            })
            .catch(() => {})
        } else {
          this.$message.error('state错误')
        }
      } else {
        window.location.href =
          'https://au.cnooc.com.cn/idp/oauth2/authorize?redirect_uri=' +
          process.env.VUE_APP_API_TOW +
          '&state=caiyou&client_id=doe&response_type=code'
      }
    }
  },
  methods: {
    //获取地址返回路径参数
    GetQueryString(name) {
      return (
        decodeURIComponent(
          (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(window.location.href) || [, ''])[1].replace(
            /\+/g,
            '%20'
          )
        ) || null
      )
    },
    handExcelJSOn(data) {
      //打印Excel表格转为json的数据
      console.log(JSON.stringify(data.body))
    },
    //获取验证码
    getCode() {
      verificationCode().then((res) => {
        this.codeImg = window.URL.createObjectURL(res)
      })
    },
    ...mapActions(['Login', 'logintow', 'Logout']),
    allEvents(type) {
      switch (type) {
        case 'login':
          if (!this.form.account) {
            this.$notification['warning']({
              message: '提示',
              description: '请输入账号',
            })
            return
          }
          if (!this.form.userPwd) {
            this.$notification['warning']({
              message: '提示',
              description: '请输入密码',
            })
            return
          }
          if (!this.form.code) {
            this.$notification['warning']({
              message: '提示',
              description: '请输入验证码',
            })
            return
          }
          this.state.loginBtn = true
          this.Login(this.form)
            .then((res) => this.loginSuccess(res))
            .catch((err) => {
              this.getCode()
              this.requestFailed(err)
            })
            .finally(() => {
              this.state.loginBtn = false
            })
          break
        case 'code':
          this.getCode()
          break
      }
    },
    loginSuccess(res) {
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`,
        })
        this.$router.push({
          path: '/',
        })
      }, 500)
    },
    requestFailed(err) {
      // this.$notification['error']({
      //   message: '错误',
      //   description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
      //   duration: 4,
      // })
    },
  },
}
</script>

<style lang="less" scoped>
.login {
  height: 100vh;
  width: 100%;
  background-image: url(../../assets/images/login/background.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  .title {
    text-align: center;
    text-shadow: 2px 2px 2px #000;
    font-size: 36px;
    font-weight: 600;
    color: #79e8ff;
    font-family: 'BoldOtf';
    margin-top: 9vh;
  }

  .login-content {
    min-width: 370px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);

    /deep/.ant-input {
      width: 100%;
      background: transparent;
      background-image: url(../../assets/images/login/input_long.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: none;
      box-shadow: none;
      padding-left: 40px;
      color: #fff;
    }

    /deep/.ant-input-password-icon {
      color: #fff;
    }

    /deep/.ant-btn-primary {
      background-color: #07b1ee;
      border-color: #07b1ee;
    }

    .login-button {
      width: 100%;
    }
  }
}
</style>